<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>SLIDER REVOLUTION -  The Responsive Slider Plugin</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

	<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="css/extralayers.css" media="screen" />	
	<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

	<!-- GOOGLE FONTS -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>



<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

	
	<!-- HEADER -->
	<header>
		<section class="container">
			<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
			<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
			<div style="clear:both"></div>
		</section>
	</header> <!-- END OF HEADER -->


	<article class="">
		<div class="tp-banner-container">

			<div id="slider" class="rev_slider">
		<ul>	<!-- SLIDE  -->
			<li data-transition="fade" data-slotamount="7" data-masterspeed="500"  data-saveperformance="off" >
				<!-- MAIN IMAGE -->
				<img src="images/dummy.png"  alt="seabg1" data-lazyload="images/seabg1.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
				<!-- LAYERS -->
		
				<!-- LAYER NR. 1 -->
				<div class="tp-caption lfb rs-parallaxlevel-10"
					data-x="center" data-hoffset="0"
					data-y="center" data-voffset="125"
					data-speed="2000"
					data-start="1000"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="500"
					style="z-index: 2;">
						<div class=" rs-pulse"  data-easing="Power4.easeInOut" data-speed="1" data-zoomstart="1" data-zoomend="1.1"><img src="images/dummy.png" alt="" data-lazyload="images/sun.png">
						</div>
				</div>
		
				<!-- LAYER NR. 2 -->
				<div class="tp-caption deepblue_sea lfb tp-resizeme rs-parallaxlevel-10"
					data-x="center" data-hoffset="0"
					data-y="700" 
					data-speed="500"
					data-start="400"
					data-easing="Power4.easeOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">
				</div>
		
				<!-- LAYER NR. 3 -->
				<div class="tp-caption customin rs-parallaxlevel-9"
					data-x="305"
					data-y="33" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="1300"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 4;">
						<div class=" rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95"><img src="images/dummy.png" alt="" data-lazyload="images/cloud4.png">
						</div>
				</div>
		
				<!-- LAYER NR. 4 -->
				<div class="tp-caption customin rs-parallaxlevel-7"
					data-x="95"
					data-y="0" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="1200"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 5;">
						<div class=" rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95"><img src="images/dummy.png" alt="" data-lazyload="images/cloud3.png">
						</div>
				</div>
		
				<!-- LAYER NR. 5 -->
				<div class="tp-caption customin rs-parallaxlevel-6"
					data-x="553"
					data-y="43" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="1400"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 6;">
						<div class=" rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95"><img src="images/dummy.png" alt="" data-lazyload="images/cloud2.png">
						</div>
				</div>
		
				<!-- LAYER NR. 6 -->
				<div class="tp-caption customin rs-parallaxlevel-8"
					data-x="651"
					data-y="-16" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="1500"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 7;">
						<div class=" rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95"><img src="images/dummy.png" alt="" data-lazyload="images/cloud1.png">
						</div>
				</div>
		
				<!-- LAYER NR. 7 -->
				<div class="tp-caption lfb rs-parallaxlevel-4"
					data-x="center" data-hoffset="998"
					data-y="bottom" data-voffset="-30"
					data-speed="500"
					data-start="800"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 8;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="5" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave4.png">
						</div>
				</div>
		
				<!-- LAYER NR. 8 -->
				<div class="tp-caption lfb rs-parallaxlevel-4"
					data-x="center" data-hoffset="0"
					data-y="bottom" data-voffset="-30"
					data-speed="500"
					data-start="800"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 9;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="5" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave4.png">
						</div>
				</div>
		
				<!-- LAYER NR. 9 -->
				<div class="tp-caption lfb rs-parallaxlevel-4"
					data-x="center" data-hoffset="-998"
					data-y="bottom" data-voffset="-30"
					data-speed="500"
					data-start="800"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 10;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="5" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave4.png">
						</div>
				</div>
		
				<!-- LAYER NR. 10 -->
				<div class="tp-caption customin rs-parallaxlevel-8"
					data-x="0"
					data-y="150" 
					data-customin="x:-2000;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="10000"
					data-start="2600"
					data-easing="Power3.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 11;">
						<div class=" rs-pendulum"  data-easing="Power1.easeInOut" data-startdeg="-6" data-enddeg="6" data-speed="2" data-origin="50% 75%"><img src="images/dummy.png" alt="" data-lazyload="images/boat.png">
						</div>
				</div>
		
				<!-- LAYER NR. 11 -->
				<div class="tp-caption lfb rs-parallaxlevel-3"
					data-x="center" data-hoffset="998"
					data-y="bottom" data-voffset="0"
					data-speed="500"
					data-start="700"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 12;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="10" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave32.png">
						</div>
				</div>
		
				<!-- LAYER NR. 12 -->
				<div class="tp-caption lfb rs-parallaxlevel-3"
					data-x="center" data-hoffset="0"
					data-y="bottom" data-voffset="0"
					data-speed="500"
					data-start="700"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 13;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="10" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave32.png">
						</div>
				</div>
		
				<!-- LAYER NR. 13 -->
				<div class="tp-caption lfb rs-parallaxlevel-3"
					data-x="center" data-hoffset="-998"
					data-y="bottom" data-voffset="0"
					data-speed="500"
					data-start="700"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 14;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="10" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave32.png">
						</div>
				</div>
		
				<!-- LAYER NR. 14 -->
				<div class="tp-caption lfb rs-parallaxlevel-8"
					data-x="913"
					data-y="370" 
					data-speed="600"
					data-start="1800"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 15;">
						<div class=" rs-pendulum"  data-easing="Power1.easeInOut" data-startdeg="-10" data-enddeg="10" data-speed="2.1" data-origin="20% 85%"><img src="images/dummy.png" alt="" data-lazyload="images/palm2.png">
						</div>
				</div>
		
				<!-- LAYER NR. 15 -->
				<div class="tp-caption lfb rs-parallaxlevel-8"
					data-x="823"
					data-y="370" 
					data-speed="600"
					data-start="1700"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 16;">
						<div class=" rs-pendulum"  data-easing="Power1.easeInOut" data-startdeg="-10" data-enddeg="10" data-speed="2" data-origin="85% 85%"><img src="images/dummy.png" alt="" data-lazyload="images/palm1.png">
						</div>
				</div>
		
				<!-- LAYER NR. 16 -->
				<div class="tp-caption lfb rs-parallaxlevel-8"
					data-x="700"
					data-y="500" 
					data-speed="1000"
					data-start="1600"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 17;"><img src="images/dummy.png" alt="" data-lazyload="images/island.png">
				</div>
		
				<!-- LAYER NR. 17 -->
				<div class="tp-caption customin rs-parallaxlevel-8"
					data-x="900"
					data-y="500" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="2300"
					data-easing="Back.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 18;"><img src="images/dummy.png" alt="" data-lazyload="images/coconuts.png">
				</div>
		
				<!-- LAYER NR. 18 -->
				<div class="tp-caption lfb rs-parallaxlevel-2"
					data-x="center" data-hoffset="998"
					data-y="bottom" data-voffset="50"
					data-speed="500"
					data-start="600"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 19;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="15" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave2.png">
						</div>
				</div>
		
				<!-- LAYER NR. 19 -->
				<div class="tp-caption lfb rs-parallaxlevel-2"
					data-x="center" data-hoffset="0"
					data-y="bottom" data-voffset="50"
					data-speed="500"
					data-start="600"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 20;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="15" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave2.png">
						</div>
				</div>
		
				<!-- LAYER NR. 20 -->
				<div class="tp-caption lfb rs-parallaxlevel-2"
					data-x="center" data-hoffset="-998"
					data-y="bottom" data-voffset="50"
					data-speed="500"
					data-start="600"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 21;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="15" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave2.png">
						</div>
				</div>
		
				<!-- LAYER NR. 21 -->
				<div class="tp-caption lfb rs-parallaxlevel-1"
					data-x="center" data-hoffset="-998"
					data-y="bottom" data-voffset="100"
					data-speed="500"
					data-start="500"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 22;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png">
						</div>
				</div>
		
				<!-- LAYER NR. 22 -->
				<div class="tp-caption lfb rs-parallaxlevel-1"
					data-x="center" data-hoffset="0"
					data-y="bottom" data-voffset="100"
					data-speed="500"
					data-start="500"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 23;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png">
						</div>
				</div>
		
				<!-- LAYER NR. 23 -->
				<div class="tp-caption lfb rs-parallaxlevel-1"
					data-x="center" data-hoffset="998"
					data-y="bottom" data-voffset="100"
					data-speed="500"
					data-start="500"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 24;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png">
						</div>
				</div>
		
				<!-- LAYER NR. 24 -->
				<div class="tp-caption customin rs-parallaxlevel-8"
					data-x="center" data-hoffset="0"
					data-y="bottom" data-voffset="100"
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="3000"
					data-start="1100"
					data-easing="Power3.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 25;"><img src="images/dummy.png" alt="" data-lazyload="images/glare.png">
				</div>
			</li>
			<!-- SLIDE  -->
			<li data-transition="fade" data-slotamount="7" data-masterspeed="500"  data-saveperformance="off" >
				<!-- MAIN IMAGE -->
				<img src="images/dummy.png"  alt="seabg1" data-lazyload="images/seabg1.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
				<!-- LAYERS -->
		
				<!-- LAYER NR. 1 -->
				<div class="tp-caption lfb rs-parallaxlevel-10"
					data-x="center" data-hoffset="0"
					data-y="center" data-voffset="125"
					data-speed="2000"
					data-start="1000"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="500"
					style="z-index: 2;">
						<div class=" rs-pulse"  data-easing="Power4.easeInOut" data-speed="1" data-zoomstart="1" data-zoomend="1.1"><img src="images/dummy.png" alt="" data-lazyload="images/sun.png">
						</div>
				</div>
		
				<!-- LAYER NR. 2 -->
				<div class="tp-caption deepblue_sea lfb tp-resizeme rs-parallaxlevel-10"
					data-x="center" data-hoffset="0"
					data-y="700" 
					data-speed="500"
					data-start="400"
					data-easing="Power4.easeOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">
				</div>
		
				<!-- LAYER NR. 3 -->
				<div class="tp-caption customin rs-parallaxlevel-9"
					data-x="305"
					data-y="33" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="1300"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 4;">
						<div class=" rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95"><img src="images/dummy.png" alt="" data-lazyload="images/cloud4.png">
						</div>
				</div>
		
				<!-- LAYER NR. 4 -->
				<div class="tp-caption customin rs-parallaxlevel-7"
					data-x="95"
					data-y="0" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="1200"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 5;">
						<div class=" rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95"><img src="images/dummy.png" alt="" data-lazyload="images/cloud3.png">
						</div>
				</div>
		
				<!-- LAYER NR. 5 -->
				<div class="tp-caption customin rs-parallaxlevel-6"
					data-x="553"
					data-y="43" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="1400"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 6;">
						<div class=" rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95"><img src="images/dummy.png" alt="" data-lazyload="images/cloud2.png">
						</div>
				</div>
		
				<!-- LAYER NR. 6 -->
				<div class="tp-caption customin rs-parallaxlevel-8"
					data-x="651"
					data-y="-16" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="1500"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 7;">
						<div class=" rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95"><img src="images/dummy.png" alt="" data-lazyload="images/cloud1.png">
						</div>
				</div>
		
				<!-- LAYER NR. 7 -->
				<div class="tp-caption lfb rs-parallaxlevel-4"
					data-x="center" data-hoffset="998"
					data-y="bottom" data-voffset="-30"
					data-speed="500"
					data-start="800"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 8;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="5" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave4.png">
						</div>
				</div>
		
				<!-- LAYER NR. 8 -->
				<div class="tp-caption lfb rs-parallaxlevel-4"
					data-x="center" data-hoffset="0"
					data-y="bottom" data-voffset="-30"
					data-speed="500"
					data-start="800"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 9;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="5" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave4.png">
						</div>
				</div>
		
				<!-- LAYER NR. 9 -->
				<div class="tp-caption lfb rs-parallaxlevel-4"
					data-x="center" data-hoffset="-998"
					data-y="bottom" data-voffset="-30"
					data-speed="500"
					data-start="800"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 10;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="5" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave4.png">
						</div>
				</div>
		
				<!-- LAYER NR. 10 -->
				<div class="tp-caption customin rs-parallaxlevel-8"
					data-x="0"
					data-y="150" 
					data-customin="x:-2000;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="10000"
					data-start="2600"
					data-easing="Power3.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 11;">
						<div class=" rs-pendulum"  data-easing="Power1.easeInOut" data-startdeg="-6" data-enddeg="6" data-speed="2" data-origin="50% 75%"><img src="images/dummy.png" alt="" data-lazyload="images/boat.png">
						</div>
				</div>
		
				<!-- LAYER NR. 11 -->
				<div class="tp-caption lfb rs-parallaxlevel-3"
					data-x="center" data-hoffset="998"
					data-y="bottom" data-voffset="0"
					data-speed="500"
					data-start="700"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 12;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="10" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave32.png">
						</div>
				</div>
		
				<!-- LAYER NR. 12 -->
				<div class="tp-caption lfb rs-parallaxlevel-3"
					data-x="center" data-hoffset="0"
					data-y="bottom" data-voffset="0"
					data-speed="500"
					data-start="700"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 13;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="10" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave32.png">
						</div>
				</div>
		
				<!-- LAYER NR. 13 -->
				<div class="tp-caption lfb rs-parallaxlevel-3"
					data-x="center" data-hoffset="-998"
					data-y="bottom" data-voffset="0"
					data-speed="500"
					data-start="700"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 14;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="10" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave32.png">
						</div>
				</div>
		
				<!-- LAYER NR. 14 -->
				<div class="tp-caption lfb rs-parallaxlevel-8"
					data-x="913"
					data-y="370" 
					data-speed="600"
					data-start="1800"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 15;">
						<div class=" rs-pendulum"  data-easing="Power1.easeInOut" data-startdeg="-10" data-enddeg="10" data-speed="2.1" data-origin="20% 85%"><img src="images/dummy.png" alt="" data-lazyload="images/palm2.png">
						</div>
				</div>
		
				<!-- LAYER NR. 15 -->
				<div class="tp-caption lfb rs-parallaxlevel-8"
					data-x="823"
					data-y="370" 
					data-speed="600"
					data-start="1700"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 16;">
						<div class=" rs-pendulum"  data-easing="Power1.easeInOut" data-startdeg="-10" data-enddeg="10" data-speed="2" data-origin="85% 85%"><img src="images/dummy.png" alt="" data-lazyload="images/palm1.png">
						</div>
				</div>
		
				<!-- LAYER NR. 16 -->
				<div class="tp-caption lfb rs-parallaxlevel-8"
					data-x="700"
					data-y="500" 
					data-speed="1000"
					data-start="1600"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 17;"><img src="images/dummy.png" alt="" data-lazyload="images/island.png">
				</div>
		
				<!-- LAYER NR. 17 -->
				<div class="tp-caption customin rs-parallaxlevel-8"
					data-x="900"
					data-y="500" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="2300"
					data-easing="Back.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 18;"><img src="images/dummy.png" alt="" data-lazyload="images/coconuts.png">
				</div>
		
				<!-- LAYER NR. 18 -->
				<div class="tp-caption lfb rs-parallaxlevel-2"
					data-x="center" data-hoffset="998"
					data-y="bottom" data-voffset="50"
					data-speed="500"
					data-start="600"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 19;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="15" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave2.png">
						</div>
				</div>
		
				<!-- LAYER NR. 19 -->
				<div class="tp-caption lfb rs-parallaxlevel-2"
					data-x="center" data-hoffset="0"
					data-y="bottom" data-voffset="50"
					data-speed="500"
					data-start="600"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 20;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="15" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave2.png">
						</div>
				</div>
		
				<!-- LAYER NR. 20 -->
				<div class="tp-caption lfb rs-parallaxlevel-2"
					data-x="center" data-hoffset="-998"
					data-y="bottom" data-voffset="50"
					data-speed="500"
					data-start="600"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 21;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="15" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave2.png">
						</div>
				</div>
		
				<!-- LAYER NR. 21 -->
				<div class="tp-caption lfb rs-parallaxlevel-1"
					data-x="center" data-hoffset="-998"
					data-y="bottom" data-voffset="100"
					data-speed="500"
					data-start="500"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 22;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png">
						</div>
				</div>
		
				<!-- LAYER NR. 22 -->
				<div class="tp-caption lfb rs-parallaxlevel-1"
					data-x="center" data-hoffset="0"
					data-y="bottom" data-voffset="100"
					data-speed="500"
					data-start="500"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 23;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png">
						</div>
				</div>
		
				<!-- LAYER NR. 23 -->
				<div class="tp-caption lfb rs-parallaxlevel-1"
					data-x="center" data-hoffset="998"
					data-y="bottom" data-voffset="100"
					data-speed="500"
					data-start="500"
					data-easing="Power4.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 24;">
						<div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%"><img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png">
						</div>
				</div>
		
				<!-- LAYER NR. 24 -->
				<div class="tp-caption customin rs-parallaxlevel-8"
					data-x="center" data-hoffset="0"
					data-y="bottom" data-voffset="100"
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="3000"
					data-start="1100"
					data-easing="Power3.easeOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 25;"><img src="images/dummy.png" alt="" data-lazyload="images/glare.png">
				</div>
			</li>
		</ul>
		<div class="tp-bannertimer"></div>	
	</div>
		</div>
	<script type="text/javascript">

					
				jQuery(document).ready(function() {
				jQuery('#slider').show().revolution(
					{
						dottedOverlay:"none",
						delay:16000,
						startwidth:1170,
						startheight:700,
						hideThumbs:200,
						
						thumbWidth:100,
						thumbHeight:50,
						thumbAmount:1,
						
						navigationType:"none",
						navigationArrows:"none",
						navigationStyle:"round",
						
						touchenabled:"on",
						onHoverStop:"on",
						
						swipe_velocity: 0.7,
						swipe_min_touches: 1,
						swipe_max_touches: 1,
						drag_block_vertical: false,
												
						parallax:"mouse",
						parallaxBgFreeze:"on",
						parallaxLevels:[10,7,4,3,2,5,4,3,2,1],
												
						keyboardNavigation:"off",
						
														
						shadow:0,
						fullWidth:"on",
						fullScreen:"off",

						spinner:"spinner4"
												
					});
					
					
					
									
				});	//ready
				
			</script>
				
	</article><!-- Content End -->








<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->

	<section class="container">
		<h2>Parallax Scroll Effect and Loops</h2>
		<p>To enable the Parallax effect on scroll, you will need to define an array of Parallax Levels and the Parallax Art within the Slider option.</p>		
		<p>Furthermore do not forget to set the Layers which you wish to move in parallax mode add the Parallax Class as well.</p> 

	   <div style="width:100%; height:40px"></div>
	  <h3>How to add Parallax mode to a layer ?</h3>
	  <pre>	  		  	
		&lt;div class="tp-caption lfb <strong>rs-parallaxlevel-1</strong>"
			data-x="center" data-hoffset="-998"
			data-y="bottom" data-voffset="100"
			data-speed="500"
			data-start="500"
			data-easing="Power4.easeOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 22;"&gt;
				&lt;div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%"&gt;
				   &lt;img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png"&gt;
				&lt;/div&gt;
		&lt;/div&gt;
	  </pre>
	  
  	  <h3>What option do i need to set?</h3>
  	  <pre>
	  	  jQuery('#slider').show().revolution(
				{
					dottedOverlay:"none",
					delay:16000,
					startwidth:1170,
					startheight:700,
					hideThumbs:200,
					
					thumbWidth:100,
					thumbHeight:50,
					thumbAmount:1,
					
					navigationType:"none",
					navigationArrows:"none",
					navigationStyle:"round",
					
					touchenabled:"on",
					onHoverStop:"on",
					
					swipe_velocity: 0.7,
					swipe_min_touches: 1,
					swipe_max_touches: 1,
					drag_block_vertical: false,
											
					<strong>parallax:"mouse",
					parallaxBgFreeze:"on",
					parallaxLevels:[10,7,4,3,2,5,4,3,2,1],</strong>
											
					keyboardNavigation:"off",
					
													
					shadow:0,
					fullWidth:"on",
					fullScreen:"off",

					spinner:"spinner4"
											
				});
  	  </pre>
  	  <h3>How to add Loop Options to Layers?  rs-wave, rs-pulse, rs-slide, rs-pendulum (see Documentation for further options)</h3>
  	  <pre>
  	  &lt;div class="tp-caption lfb rs-parallaxlevel-1"
			data-x="center" data-hoffset="-998"
			data-y="bottom" data-voffset="100"
			data-speed="500"
			data-start="500"
			data-easing="Power4.easeOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 22;"&gt;
				<strong>&lt;div class=" rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%"&gt;
				  &lt;img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png"&gt;
				&lt;/div&gt;</strong>
		&lt;/div&gt;
  	  </pre>
  	  
	</section>






</body>